<template>
  <v-container>
    <div class="tool-bar">
      <div style="width: 70%">
        <v-text-field
          outlined
          label="请输入关键字："
          hide-details="auto"
          style="margin-left: 2%; margin-right: 2%"
          v-model="keyword"
		color="#bcbcbc"
        />
      </div>
      <v-btn style="min-height: 6vh;min-width: 12%;border-radius: 32px;font-size: 18px;" color="error"  @click="getList">
        <v-icon>mdi-magnify</v-icon>搜索</v-btn
      >
    </div>
    <div class="content-area" style="margin-top: 3vh">
      <v-row dense style="margin-top: 1vh;">
        <v-col v-for="(item, i) in items" :key="i" cols="12">
          <v-card style="height: 19vh ; border: #f0f0f0 solid 0.1em; box-shadow: none">
            <div class="d-flex flex-no-wrap justify-space-between" style="min-height: 18.5vh">
              <div>
                <v-card-title style="font-size: 24px">
					{{item.title}}
                </v-card-title>
                <MetaCard
                  :source="item.source"
                  :pubDate="item.pubDate.substring(0, 10)"
					:ext-link="item.extLink"
                />
                  <v-btn
                    v-if="item.extId === null"
                    color="primary"
                    text
                    @click="goToSelf"

                  >
                    <span style="font-family: 微软雅黑">阅读全文</span>
                  </v-btn>
                  <v-btn
                    v-else
                    color="primary"
                    text
                    @click="GoToURL(item.extLink)"
                    ><span style="font-family: 微软雅黑">阅读全文</span></v-btn
                  >
<!--                  <v-menu offset-y v-if="isManager">-->
<!--                    <template v-slot:activator="{ on, attrs }">-->
<!--                      <v-btn color="primary" dark v-bind="attrs" v-on="on">-->
<!--                        操作-->
<!--                      </v-btn>-->
<!--                    </template>-->

<!--                    <v-list>-->
<!--                      <v-list-item @click="removepassage(item, i)">-->
<!--                        <v-list-item-title>删除</v-list-item-title>-->
<!--                      </v-list-item>-->
<!--                      <v-list-item-->
<!--                        @click="edit(item)"-->
<!--                        v-if="item.extId != null"-->
<!--                      >-->
<!--                        <v-list-item-title>编辑</v-list-item-title>-->
<!--                      </v-list-item>-->
<!--                    </v-list>-->
<!--                  </v-menu>-->

              </div>

              <v-avatar class="ma-3" size="135" tile style="margin-right: 0.5vh">
                <v-img :src="item.thumbnail" style="vertical-align: center"></v-img>
              </v-avatar>
            </div>
          </v-card>
        </v-col>
      </v-row>
    </div>
    <div class="text-center" style="margin-top: 1vh;">
      <v-container>
        <v-row justify="center">
          <v-col cols="8">
            <v-container class="max-width">
              <v-pagination
                @input="getList"
                v-model="pageCount"
                :length="totalCount"
                :total-visible="7"
				color="error"
              ></v-pagination>
            </v-container>
          </v-col>
        </v-row>
      </v-container>
    </div>
  </v-container>
</template>

<script>

import MetaCard from "@/components/views/article/MetaCard.vue";
export default {
	name:"NewsPage",
	components:{MetaCard},
  data(){return{
    listData: [], //用于显示的数据
    pageCount: 1, //分页请求的页码
    totalCount: 1, //返回的新闻详情的总条数
    //totalCount是每次请求后后端返回的存在与数据库中符合条件的数据条数总数
    limitCount: 7, //分页请求一次请求的数据条数
    keyword: "",
	color: '#b5b5b5',
	items:[

	]
  }},
  created() {
    this.getList();
  },
  computed: {
    isManager() {
      return this.$store.getters.isManager;
    },
  },
  methods: {
		GoToURL(url) {
			window.open(url, "_blank"); // 新窗口打开外链接//
		},
      getList() {
		console.log(this.keyword)
        this.$api.article
          .getNews(this.pageCount - 1, this.limitCount, this.keyword)
          .then((res) => {
            let result = res;
            console.log(result);
            if (result.success) {
              this.items = result.data;
              // this.pageCount += 1
              this.totalCount = result.totalPage; //总条数
            } else {
              this.$Message.error("获取新闻失败，原因：" + res.exc);
            }
          });
      },
      removepassage(item) {
        this.$api.article
          .delete(item.id)
          .then((res) => {
            let result = res;
            if (result.success) {
              // this.Refutations.splice(i, 1);
              this.getList();
              this.$Message.success("删除成功");
            } else {
              this.$Message.error("删除失败,出现了意料之外的错误");
            }
          })
          .catch(function (error) {
            console.log(error);
            this.$Message.error("请求失败,出现了意料之外的错误");
          });
      },
      edit(item) {
        this.$router.push("/manage/article/edit/" + item.id);
      },
  },
};
</script>

<style scoped>
.tool-bar {
  margin-top: 1vh;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}
.content-area {
  margin: auto 2vw;
}
</style>
